<template>
  <div>
    <el-dialog
      title="分配权限"
      :visible="visrole"
      width="50%"
      @close="celbtn"
    >
      <div class="content">
        <el-tree
          ref="tree"
          :data="permlist"
          :props="{label:'title'}"
          check-strictly
          node-key="id"
          show-checkbox
        />
      </div>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="addpermbtn">确 定</el-button>
        <el-button @click="celbtn">取 消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getroledetail, putperm } from '@/api/character'
import { getpermlist } from '@/api/permission'
// 处理数据
import { processdata } from '@/utils/index'
export default {
  props: {
    visrole: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      permlist: [], // 渲染所有权限
      permdetail: [], // 当前角色原有的权限
      permissions: [], // 选中的权限数组id
      roleid: 0
    }
  },
  //   获取所有权限渲染树形弹窗
  async created() {
    const res = await getpermlist({ _limit: 100, _start: 0 })
    this.permlist = processdata(res.data, '0')
  },
  methods: {
    // 分配权限 获取当前点击的权限列表
    async getperm(id) {
      this.roleid = id
      const res = await getroledetail(id)
      //   当前用户的权限
      this.permdetail = res.data.permissions
      // 当前数组作为设置目前勾选的节点，使用此方法必须设置 node-key 属性
      //   设置勾选的数组
      // 因为获取到的权限是一个数组对象，而不是权限的id数组
      //   所以这里使用setCheckedNodes，通过与全部权限对比勾选数组中的权限
      this.$refs.tree.setCheckedNodes(this.permdetail)
    },
    async addpermbtn() {
      this.permissions = this.$refs.tree.getCheckedKeys()
      //  将所有勾选的id赋值给数组，数组作为参数调用接口
      await putperm({ id: this.roleid, permissions: this.permissions })
      //   提示
      this.$message({
        message: '分配权限成功',
        type: 'success'
      })
      //   关闭弹窗
      this.celbtn()
    },
    celbtn() {
      this.permissions = []
      this.$emit('update:visrole', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
    height: 400px;
    overflow: auto;
  }
</style>
